<!--
 * @Author: y001554
 * @Date: 2023-01-16 20:11:08
 * @LastEditors: y001554
 * @LastEditTime: 2023-06-13 14:08:00
 * @FilePath: \ylwl\src\demos\table.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by FE/ylwl, All Rights Reserved. 
-->

<template>
  <div class="pages">
    qwe {{ selectCells }}{{ treevalue }}
    <M-Table
      v-model="selectCells"
      :customer-props="prop"
      :table-modal="tableModal"
      :actions-modal="actionsModal"
      :request="request"
      row-key="goodsId"
      @submit="test"
    >
      <template #pagesHeader>
        <div>我是自定头部</div>
      </template>
      <template #goodsName>
        <div>我是自定義插槽</div>
      </template>
    </M-Table>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, Ref } from 'vue'
// import utils from '@@/utils/index'
defineOptions({
  name: 'Demos'
})
const treevalue = ref('12')
interface FormType {
  citys: string | number | Array<any>
}
const selectCells = ref<any>([])
const prop = ref({
  defaultForm: {
    username: '我是默认值'
    // usergroup: '\'
  },
  toogleShow: ['username'],
  optionProps: {}
  // manualLoad: true
})
const tableModal = [
  {
    prop: 'goodsId',
    label: 'ID',
    iProps: {
      width: '200px'
    }
  },
  {
    prop: 'goodsNo',
    label: '商品编号',
    permission: () => true,
    iProps: {
      width: '300px'
    }
  },
  {
    prop: 'goodsName',
    label: '商品名称',
    iProps: {
      width: '120px',
      'show-overflow-tooltip': true
    }
  },
  {
    prop: 'goodsType',
    label: '商品类型',
    renderText: () => '字典项映射'
  }
]

const actionsModal = [
  {
    label: '编辑',
    type: 'primary',
    onclick: (e) => {
      alert(e)
    }
  },
  {
    label: '查看',
    onclick: (e) => {
      alert(e)
    },
    permission: () => true
  },
  {
    label: '操作1',
    onclick: (e) => {
      alert(e)
    },
    permission: 'testPermission'
    // inCollapse: false
  },
  {
    label: '删除',
    type: 'danger',
    onclick: (e) => {
      console.log('e', e)
    },
    permission: true,
    inCollapse: true
  }
]
const test = (res: any) => {
  console.log('res', res)
}

const request = (params) =>
  new Promise((rol, rej) => {
    // console.log(params)

    setTimeout(() => {
      rol({
        count: 105,
        list: [
          {
            goodsId: 2893,
            goodsNo: '355581346429762760301',
            goodsName:
              '(黑龙专属）太阳帽防紫外线夏日必备空顶帽户外遮阳透气女款',
            goodsTypeName: '单品',
            goodsType: 1,
            retailPrice: '29.90',
            price: null,
            darensharingRate: 0,
            tuanzhangRate: 0,
            platServiceRate: 0,
            techServiceRate: 0,
            skuNum: 1,
            agentPromoteStatus: '上架/推广中',
            dspStatus: 0,
            dspStatusName: '停止代发',
            checkDspStatus: 0
          },
          {
            goodsId: 1972,
            goodsNo: '358525400301088098001',
            goodsName:
              '02款棉马甲外套哑光加大棉衣22新款秋冬潮流棉服宽松坎肩男女外穿',
            goodsTypeName: '单品',
            goodsType: 1,
            retailPrice: '29.90',
            price: null,
            darensharingRate: 0,
            tuanzhangRate: 0,
            platServiceRate: 0,
            techServiceRate: 0,
            skuNum: 1,
            agentPromoteStatus: '上架/推广中',
            dspStatus: 0,
            dspStatusName: '停止代发',
            checkDspStatus: 0
          }
        ]
      })
    }, 300)
  })

// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
</script>
<style scoped>
.pages {
  width: 100vw;
  height: 100vh;
  padding-right: 50px;
}
</style>
